<div class="docs-video" data-docs-video>

  <!-- Default state: button -->
  <div class="docs-video-trigger">
    <div class="docs-video-left">
      <i class="fi-video"></i>
    </div>
    <div class="docs-video-right">
      <strong>Watch Video on {{video.title}}</strong>
      <span>{{video.desc}}</span> <!-- @TODO: Can we customize the subtitle for each manually? -->
    </div>
  </div>

  <!-- When video button is clicked: -->
  <div class="docs-video-container" data-toggler=".is-Open">
    <div class="docs-video-expanded">
      <div data-sticky-container>
        <div class="docs-video-inner" data-sticky data-anchor="docs" data-sticky-on="large">
          <span class="video-close" data-toggle><img src="assets/icons/delete.svg" alt=""></span>
          <div class="video-container">
            <div class="responsive-embed widescreen">
              <iframe width="560" height="315" src="{{video.url}}" frameborder="0" allowfullscreen></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
